<!--
 * @Author: 零の守墓人
 * @Date: 2025-08-07 10:00:00
 * @LastEditors: 零の守墓人
 * @LastEditTime: 2025-08-07 10:00:00
 * @Description: 异步组件的加载状态显示组件，路由懒加载时使用
-->
<template>
    <div class="loading-spinner-wrapper">
        <div class="spinner-container">
            <div class="spinner"></div>
            <p class="loading-text">{{ text }}</p>
        </div>
    </div>
</template>

<script setup lang="ts">
// 定义组件属性
interface Props {
    text?: string
}

// 设置默认值
withDefaults(defineProps<Props>(), {
    text: '加载中...'
})
</script>

<style scoped lang="scss">
.loading-spinner-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    width: 100%;
}

.spinner-container {
    text-align: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #6366f1;
    border-radius: 50%;
    animation: spinner-rotate 1s linear infinite;
    margin: 0 auto 16px;
}

.loading-text {
    color: #6b7280;
    font-size: 14px;
    margin: 0;
    /* 确保文字不旋转 */
    transform: none;
    animation: none;
}

@keyframes spinner-rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
</style>